<template>
  <img :src="mySrc" :alt="alt" :srcset="srcset" @load="handleLoad" @error="handleError">
</template>

<script>
  export default {
    props: {
      alt: {
        type: String
      },
      src: {
        type: String
      },
      srcset: {
        type: String
      },
      defaultSrc: {
        type: String,
        default: '/static/images/default-logo.png'
      }
    },
    computed: {
      mySrc () {
        return this.src || this.defaultSrc
      }
    },
    methods: {
      handleLoad (e) {
        this.$emit('load', e)
      },
      handleError (e) {
        if (this.$el.src.indexOf(this.defaultSrc) === -1) {
          this.$el.setAttribute('error-src', this.$el.src)
          this.$el.src = this.defaultSrc
          this.$emit('error', e)
        }
      }
    }
  }
</script>

<style lang="scss">
    @import '~styles/var.scss';
</style>
